<template>
  <div class="main">
    <div class="title">校公开课</div>
    <img :src="$store.state.appBg" class="bg1" alt>
    <img v-if="showjsz" style="width:1920px;height: 1080px;" src="@/assets/images/jsz.png" alt="">
    <div class="main-container">
      <scroll-container ref="scrollContainer">
        <div class="container-list">
          <multi-list @scrollTo="scrollTo" :groupDatas="groupDatas">
            <imglist_w384
              :groupData="groupDatas.dataArr[0]"
              :focArr="groupDatas.focArr[0]"
              :group="groups[0]"
            ></imglist_w384>
            <imglist_w384
              :groupData="groupDatas.dataArr[1]"
              :focArr="groupDatas.focArr[1]"
              :group="groups[1]"
            ></imglist_w384>
          </multi-list>
        </div>
      </scroll-container>
    </div>
  </div>
</template>

<script>
  import scrollContainer from "@/components/base/scroll-container/scroll-container";
  import multiList from "@/components/base/multi-list/multi-list";
  import Navigation from "@/components/Navigation";
  import imglist_w384 from "../ImgList_w384";

  export default {
    name: "xgkk",
    components: {
      Navigation,
      scrollContainer,
      multiList,
      imglist_w384
    },
    data() {
      return {
        groups: [0, 1],
        scrollY: 0,
        backObjName: "xgkk",
        hs: this.$store.state.hs,
        bridge: this.$store.state.bridge,
        groupDatas: {
          dataArr: [
            {
              maxLine: 4,
              dynamic: true,
              title: "",
              data: [],
              focObj: []
            },
            {
              maxLine: 4,
              dynamic: true,
              title: "",
              data: [],
              focObj: []
            }
          ],
          focArr: [[], []]
        },
        showjsz: false
      };
    },
    methods: {
      scroll(pos) {
        this.scrollY = pos.y;
        // console.log(pos);
      },
      scrollTo(targetIndex) {
        //console.log("targetIndex", targetIndex);
        this.$refs.scrollContainer.scrollTo(targetIndex);
      },
      setBackObj(backObj) {
        this.hs.cookie.set(this.backObjName, JSON.stringify(backObj));
      },
      goPlay(folderCode, contentId, contentType) {
        // this.$store.commit("setAppShow", false);
        let url =
          "http://ips-4k.hzdtv.tv/dataquery/gotoAuthPlay?folderCode=" +
          folderCode +
          "&contentId=" +
          contentId +
          "&contentType=" +
          contentType;
        this.hs.ajax.get(
          url,
          _responseText => {
            let res = JSON.parse(_responseText);
            //console.log(res);
            if (res.result == "0" || res.result == 0) {
              if (res.authResult == 0) {
                let url =
                  "http://ips-4k.hzdtv.tv/dataquery/contentPlayUrl?folderCode=" +
                  folderCode +
                  "&contentId=" +
                  contentId +
                  "&contentType=" +
                  contentType +
                  "&playUrlType=rtsp";
                this.hs.ajax.get(
                  url,
                  _responseText => {
                    let res = JSON.parse(_responseText);
                    this.bridge.gotoApplication2play(res.playUrl);
                  },
                  0,
                  3000
                );
              } else {
                this.bridge.gotoApplication2order({
                  ppvId: res.ppvId,
                  columnAlias: this.folderCode
                });
              }
            }
          },
          0,
          3000
        );
      },
      getDataAll() {
        let schoolId = this.$store.state.school.id
        // let schoolId = Object.keys(this.$store.state.user).length > 0 ? this.$store.state.user.clazz.grade.school.id : this.$store.state.school.id
        this.hs.ajax.get("http://" + this.$store.state.domain + "/SMSCH-STB/column/find-all" +
          "?ids[]=" + [14, 15] +
          "&schoolId=" + schoolId,
          data => {
            data = JSON.parse(data);
            console.log(data);
            if (data.head.code === 1) {

              if(data.body[0].materials.length > 0){
                // 精品课程
                this.groupDatas.dataArr[0].title = data.body[0].name;
                this.groupDatas.dataArr[0].data = data.body[0].materials;
              }

              if(data.body[1].materials.length > 0) {
                //全部课程
                this.groupDatas.dataArr[1].title = data.body[1].name;
                this.groupDatas.dataArr[1].data = data.body[1].materials;
              }

              if(!data.body[0].materials.length && !data.body[1].materials.length){
                this.showjsz = true
              }
            }

          }, 0, function (msg) {
          }, 3000);
      }

    },

    created() {
      this.getDataAll()
    },
    mounted() {
      this.hs.addSelect(this.groups, (group, objid, objindex) => {
        // console.log(this.groupDatas.dataArr[group]);
        this.goPlay(
          this.groupDatas.dataArr[group].data[objindex].more.folderCode,
          this.groupDatas.dataArr[group].data[objindex].more.contentId,
          this.groupDatas.dataArr[group].data[objindex].more.contentType
        );
      });

      this.hs.initFocus("0-0");

      //  查看是否有记忆焦点
      if (this.hs.cookie.get(this.backObjName)) {
        let backObj = JSON.parse(this.hs.cookie.get(this.backObjName));
        let focArr = backObj.backFocArr;
        this.hs.cookie.delOne(this.backObjName);
        this.hs.initFocus(focArr[0], true);
      }

      this.bridge.whenKeyBack = () => {
        // 当页面显示的时候就返回首页, 隐藏的时候, 就显示页面
        if (this.$store.state.appShow) {
          window.history.go(-1);
        } else {
          this.$store.commit("setAppShow", true);
        }
      };
    }
  };
</script>

<style scoped lang="less">
  .main {
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    .bg1 {
      position: absolute;
      top: 0;
      z-index: -1;
    }
    .title {
      text-align: right;
      margin-top: 77px;
      margin-right: 120px;
      font-family: MicrosoftYaHei;
      font-size: 60px;
      line-height: 60px;
      letter-spacing: 0px;
      color: #a8e7ff;
    }
    .main-container {
      margin-left: 72px;
      margin-top: 0px;
      height: 930px;
      .multi-container {
        padding-left: 48px;
        padding-top: 48px;
      }
    }
  }
</style>
